<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>javascript study</title>
</head>

<body>
    <script>
        // 通过html元素id查找
        var x = document.getElementById("intro");
        // 查找 id="main" 元素中的所有 <p> 元素
        var x = document.getElementById("main");
        var y = x.getElementsByTagName("p");
        // 通过html元素类查找
        var x = document.getElementsByClassName("intro");

        // 直接向 HTML 输出流写内容。会覆盖所有已经输出的内容
        document.write(Date());
        // 改变 HTML 元素的内容
        document.getElementById("p1").innerHTML = "新文本!";
        // 改变 HTML 元素属性
        document.getElementById("image").src = "landscape.jpg";

        // 改变 HTML 样式
        document.getElementById("p2").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p2").style.fontSize = "larger";

        // 添加click处理，注意不是onclick
        document.getElementById("myBtn").addEventListener("click", displayDate);
        element.addEventListener("mouseover", myFunction);
        element.addEventListener("mouseout", myThirdFunction);

        window.addEventListener("resize", function () {
            document.getElementById("demo").innerHTML = sometext;
        });

        // 创建新 HTML 元素
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新段落。");
        para.appendChild(node);

        var element = document.getElementById("div1");
        element.appendChild(para);

        // 删除元素
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);

        // 警告框
        window.alert("sometext");
        // 确认框
        window.confirm("sometext");
        // 提示框
        window.prompt("请输入你的名字","herry");
        
        // 每3秒弹窗
        var myalert = setInterval(function(){alert("Hello")},3000);
        // 清除
        clearInterval(myalert);

        // 设置3秒后弹窗
        var myalert = setTimeout(function(){alert("Hello")},3000);
        // 清除
        clearTimeout(myalert);

        // 创建cookie
        document.cookie="username=John Doe";
        // 添加一个过期时间
        document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
        // 读取cookie
        var cookie = document.cookie;
        // 删除cookie，将过期时间设置为以前的时间
        document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

    </script>
    <!-- 直接书写 javascript 代码 -->
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    <!-- 调用 javascript 函数 -->
    <h1 onclick="changetext(this)">点击文本!</h1>

    <input type="text" id="fname" onchange="upperCase()">

    <div id="example"></div>
    <script>
        txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt += "<p>浏览器名称: " + navigator.appName + "</p>";
        txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt += "<p>硬件平台: " + navigator.platform + "</p>";
        txt += "<p>用户代理: " + navigator.userAgent + "</p>";
        txt += "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
        document.getElementById("example").innerHTML = txt;
    </script>
</body>

</html>